<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频监控系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/all.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-icons.css') }}">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #2c3e50);
            color: #fff;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            text-align: center;
        }

        .logo {
            font-size: 4rem;
            margin-bottom: 30px;
            color: #8f94fb;
        }

        h1 {
            font-size: 2.8rem;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #4e54c8, #8f94fb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .subtitle {
            color: #a0d2eb;
            font-size: 1.2rem;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .dashboard-card {
            background: rgba(0, 15, 30, 0.8);
            border-radius: 15px;
            padding: 30px;
            transition: all 0.3s;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .dashboard-card:hover {
            transform: translateY(-5px);
            border-color: #4e54c8;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }

        .card-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #8f94fb;
        }

        .card-title {
            font-size: 1.4rem;
            margin-bottom: 10px;
        }

        .card-desc {
            color: #a0d2eb;
            font-size: 0.95rem;
        }

        footer {
            text-align: center;
            margin-top: 80px;
            padding: 25px;
            color: #a0d2eb;
            font-size: 0.95rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* 用户信息区域样式 */
        .user-info {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
        }

        .btn-logout {
            padding: 5px 10px;
            background: #ff4444;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn-logout:hover {
            background: #cc0000;
        }


        @media (max-width: 768px) {
            .logo {
                font-size: 3rem;
            }

            h1 {
                font-size: 2.2rem;
            }

            .subtitle {
                font-size: 1rem;
            }
        }

        .svg-icon {
            /* 设置SVG图标的宽度和高度 */
            width: 56px;
            height: 55px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 直接使用模板变量显示用户信息 -->
    <div class="user-info">
        <span>欢迎您，{{ username }}</span>
        <button id="logoutBtn" class="btn-logout">退出登录</button>
    </div>

    <div class="logo">
        <i class="fas fa-shield-alt"></i>
    </div>
    <h1>视频监控系统</h1>
    <p class="subtitle">
        一套基于Web的视频监控平台</p>

    <div class="dashboard-grid">
        <!-- 普通用户功能 -->
        <div class="dashboard-card" data-route="realtime">
            <div class="card-icon">
                <i class="fas fa-video"></i>
            </div>
            <h3 class="card-title">实时监控</h3>
            <p class="card-desc">多窗口实时查看监控画面</p>
        </div>

        <div class="dashboard-card" data-route="playback">
            <div class="card-icon">
                <i class="fas fa-history"></i>
            </div>
            <h3 class="card-title">录像回放</h3>
            <p class="card-desc">按时间查询和播放历史录像</p>
        </div>

        <!-- 管理员专属功能 (通过模板变量控制显示) -->
        {% if current_user.role == 'admin' %}
        <div class="dashboard-card" data-route="ptz_control">
            <div class="card-icon">
                <!-- <i class="fas fa-joystick"></i> -->
                <svg t="1751337654732" class="svg-icon" viewBox="0 0 1042 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="1796" id="mx_n_1751337654734" width="200" height="200">
                    <path
                            d="M864.914286 384c-38.4-67.657143-96.914286-122.514286-164.571429-157.257143V73.142857c0-20.114286-16.457143-36.571429-36.571428-36.571428h-292.571429c-20.114286 0-36.571429 16.457143-36.571429 36.571428v153.6c-69.485714 34.742857-126.171429 89.6-164.571428 157.257143h694.857143z"
                            fill="#8f94fb" p-id="1797"></path>
                    <path
                            d="M897.828571 457.142857H135.314286c-12.8 40.228571-21.942857 84.114286-21.942857 128 0 140.8 73.142857 265.142857 182.857142 336.457143V733.257143c0-120.685714 98.742857-219.428571 219.428572-219.428572s219.428571 98.742857 219.428571 219.428572v188.342857c109.714286-71.314286 182.857143-195.657143 182.857143-336.457143 1.828571-43.885714-5.485714-87.771429-20.114286-128z"
                            fill="#8f94fb" p-id="1798"></path>
                    <path
                            d="M517.485714 768a36.571429 36.571429 0 1 0 0-73.142857 36.571429 36.571429 0 0 0 0 73.142857z"
                            fill="#8f94fb" p-id="1799"></path>
                    <path
                            d="M517.485714 586.971429c-80.457143 0-146.285714 65.828571-146.285714 146.285714v226.742857c45.714286 18.285714 95.085714 27.428571 146.285714 27.428571s100.571429-9.142857 146.285715-27.428571V733.257143c0-80.457143-65.828571-146.285714-146.285715-146.285714z m0 254.171428c-60.342857 0-109.714286-49.371429-109.714285-109.714286s49.371429-109.714286 109.714285-109.714285 109.714286 49.371429 109.714286 109.714285-49.371429 109.714286-109.714286 109.714286z"
                            fill="#8f94fb" p-id="1800"></path>
                </svg>
            </div>
            <h3 class="card-title">云台控制</h3>
            <p class="card-desc">控制PTZ球机方向、变焦和速度</p>
        </div>
        {% endif %}
    </div>
</div>

<footer>
    &copy; 2025 视频监控系统 | 版本 1.0.0
</footer>

<script>
    // 检查Token是否过期（需要JWT库解析）
    function isTokenValid(token) {
        try {
            const payload = JSON.parse(atob(token.split('.')[1]));
            return payload.exp * 1000 > Date.now();
        } catch {
            return false;
        }
    }

    const token = localStorage.getItem('token');
    if (!token || !isTokenValid(token)) {
        window.location.href = '/login';
    }

    // 只需要处理交互逻辑，不需要重复验证权限
    document.addEventListener('DOMContentLoaded', () => {
        // 绑定卡片点击事件
        document.querySelectorAll('.dashboard-card').forEach(card => {
            card.addEventListener('click', function () {
                const route = this.getAttribute('data-route');
                console.log("路由：", route);
                const token = localStorage.getItem('token');
                const user = localStorage.getItem('user');
                // 前端请求代码修正
                fetch(route, {
                    headers: {
                        'Authorization': `Bearer ${token}`  // 标准方式
                    }
                }).then(res => {
                    if (res.status === 401 || res.status === 403) {
                        alert('请使用管理员账号登录');
                        window.location.href = '/login';
                    }
                    if (res.ok) {
                        window.location.href = route;  // 最终跳转
                    } else {
                        window.location.href = '/login';
                    }
                });
            });
        });

        // 退出登录
        document.getElementById('logoutBtn').addEventListener('click', () => {
            fetch('/api/logout', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`
                }
            })
            .then(() => {
                localStorage.removeItem('token');
                localStorage.removeItem('user');
                window.location.href = '/login';
            })
            .catch(error => {
                console.error('退出失败:', error);
                // 即使API调用失败也强制前端清理
                localStorage.removeItem('token');
                localStorage.removeItem('user');
                window.location.href = '/login';
            });
        });
    });
</script>
</body>
</html>